<template>
  <view class="tab-bar">
    <view class="flex">
      <view class="bar" v-for="(item, key) in tabbar" :key="key" :class="{ active: current === item.active }" @click="onChange(item, key)">
        <view class="b_x">
          <image class="icon" :src="current === item.active ? item.selectedIconPath : item.iconPath" />
          <text class="name">{{ item.text }}</text>
        </view>
      </view>
    </view>
    <!-- <view :style="'height: '+safeAreaBottom+'px;'"></view> -->
  </view>
</template>
	
<script>
export default {
  name: "BTabBar",
  props: {
    current: {
      type: Number,
      default: 0,
    },
  },
  computed: {
    safeAreaBottom() {
      return uni.$u.sys().safeAreaInsets.bottom;
    },
    tabbar() {
      return [
        {
          pagePath: "/pages/index/index",
          selectedIconPath: "/static/image/icon-home-active.png",
          iconPath: "/static/image/icon-home.png",
          text: "首页",
          active: 0,
        },
        {
          pagePath: "/pages/user/index",
          selectedIconPath: "/static/image/icon-user-active.png",
          iconPath: "/static/image/icon-user.png",
          text: "我的",
          active: 1,
        },
      ];
    },
  },
  mounted() {
    uni.hideTabBar();
  },
  methods: {
    onChange(item, index) {
      uni.switchTab({ url: this.tabbar[index].pagePath });
    },
  },
};
</script>

<style lang="scss">
.tab-bar {
  background-color: #fff;
  box-shadow: 0px 0px 16rpx 0px rgba(0, 0, 0, 0.1);
  .flex {
    display: flex;
    flex-direction: row;
  }
  .bar {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 14rpx 0;
    .icon {
      width: 54rpx;
      height: 54rpx;
      margin: 0 auto;
    }
    .name {
      color: #333;
      display: block;
      font-size: 24rpx;
      line-height: 20rpx;
    }
  }
  .bar.active {
    .name {
      color: #f83d3d;
    }
  }
}
</style>